<template>
    <div class="container">
        <Collapse :bordered="true" :defaultActiveKey="['1']">
            <CollapsePanel header="日志详细信息" key="1">
                <div class="details">
                    <span>业&nbsp;&nbsp;务&nbsp;名:</span><span>{{data.businessName}}</span>
                </div>
                <div class="details">
                    <span>方法名称:</span><span>{{data.methodName}}</span>
                </div>
                <div class="details">
                    <span>请求地址:</span><span>{{data.requestAddress}}</span>
                </div>
                <div class="details">
                    <span>请求方式:</span><span>{{data.requestMethod}}</span>
                </div>
                <div class="details">
                    <span>返回状态:</span><span>{{data.status}}</span>
                </div>
                <div class="details">
                    <span>请求参数</span>
                </div>
                <Table
                        :dataSource="parameter.data || []"
                        :columns="parameter.columns || []"
                        :scroll="parameter.data.length > 0 &&
                        parameter.columns.length > 10 ? {x: parameter.columns.length*10 + '%', y: true} : {}"
                        :pagination="false"
                />
                <div class="details">
                    <span>返回结果</span>
                </div>
                <div class="error" v-if="type !== '0'">
                    {{result}}
                </div>
                <div class="details" v-if="type === '0'">
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;状&nbsp;&nbsp;态&nbsp;码:</span><span>{{result.code}}</span>
                </div>
                <div class="details" v-if="type === '0'">
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;返回消息:</span><span>{{result.message}}</span>
                </div>
                <Table
                        v-if="type === '0'"
                        :dataSource="resultRows.data || []"
                        :columns="resultRows.columns || []"
                        :scroll="resultRows.data.length > 0 &&
                        resultRows.columns.length > 10 ? {x: resultRows.columns.length*10 + '%', y: true} : ''"
                        :pagination="false"
                        rowKey="id"
                />
            </CollapsePanel>
        </Collapse>
    </div>
</template>
<script>
    import {details} from "../../../api/logger";
    import {Base64} from 'js-base64';
    import {Table, Collapse, CollapsePanel, Row} from "ant-design-vue";

    export default {
        name: 'logger-details',
        data(){
            return {
                id: '',
                data: {},
                parameter: {
                    data: [],
                    columns: []
                },
                result: {},
                resultRows: {
                    data: [],
                    columns: []
                },
                error: '',
                type: ''
            }
        },
        components:{
            Collapse,
            CollapsePanel,
            Row,
            Table
        },
        mounted(){
            const query = this.$route.query;
            this.id = JSON.parse(Base64.decode(Object.keys(query)
                .map(item => query[item]).join(""))).id;
            this._details();
        },
        methods: {

            /**
             * 查询详细
             * @private
             */
            _details(){
                details(this.id).then(res => {
                    this.data = res.data;
                    this.type = res.data.type;
                    res.data.parameter != "null" && Object.keys(JSON.parse(res.data.parameter)).map(item => {
                        this.parameter.columns.push({title: item, dataIndex: item});
                    });
                    this.parameter.data = [JSON.parse(res.data.parameter)];
                    this.result = this.type === '0' ? JSON.parse(res.data.context) : res.data.context;
                    if(res.data.type === '0'){
                        if(typeof this.result?.data === "object" && !(this.result?.data instanceof Array)){
                            if(this.result.data?.rows){
                                this._setResultRow(this.result.data?.rows);
                            }else{
                                this.result.data !== "{}" && Object.keys(this.result.data).map(item => {
                                    this.resultRows.columns.push({title: item, dataIndex: item});
                                });
                                this.resultRows.data = [this.result.data];
                            }
                        }
                        if(this.result?.data instanceof Array){
                            this._setResultRow(this.result.data);
                        }
                    }
                })
            },

            /**
             * 设置返回结果
             * @param rows
             * @private
             */
            _setResultRow(rows){
                rows?.length > 0 && Object.keys(rows[0]).map(item => {
                    this.resultRows.columns.push({title: item, dataIndex: item});
                })
                if(rows && rows.length > 0){
                    this.resultRows.data = rows;
                }
            }
        }
    }
</script>
<style>

</style>
